<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="list1" name="first">
      <list1 v-if="activeName === 'first'" :tableData="listData" />
    </el-tab-pane>
    <el-tab-pane label="list2" name="second">
      <list2 v-if="activeName === 'second'" :tableData="listData" />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import list1 from "@/components/Template/list1";
import list2 from "@/components/Template/list2";
export default {
  data() {
    return {
      activeName: 'first',
      listData: [],
    };
  },
  components: {
    list1,
    list2
  },
  created() {
    this.getdata(this.activeName);
  },
  methods: {
    handleClick(tab, event) {
      this.getdata(tab.name);
    },
    getdata(index){
      if (index == 'first') {
        this.listData = [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }else{
        this.listData = [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
};
</script>